import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, toRefs, onMounted, render, h, normalizeClass, unref, normalizeStyle, createCommentVNode, renderSlot, withModifiers, createVNode } from 'vue';

const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};

const _sfc_main$2 = {};

const _hoisted_1$2 = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "32",
  height: "32",
  viewBox: "0 0 24 24"
};
const _hoisted_2$1 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"
}, null, -1);
const _hoisted_3$1 = [
  _hoisted_2$1
];

function _sfc_render$1(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$1))
}
const chevronLeft = /*#__PURE__*/_export_sfc(_sfc_main$2, [['render',_sfc_render$1]]);

const _sfc_main$1 = {};

const _hoisted_1$1 = {
  xmlns: "http://www.w3.org/2000/svg",
  width: "32",
  height: "32",
  viewBox: "0 0 24 24"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
  fill: "currentColor",
  d: "M9.31 6.71a.996.996 0 0 0 0 1.41L13.19 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.72 6.7c-.38-.38-1.02-.38-1.41.01"
}, null, -1);
const _hoisted_3 = [
  _hoisted_2
];

function _sfc_render(_ctx, _cache) {
  return (openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3))
}
const chevronRight = /*#__PURE__*/_export_sfc(_sfc_main$1, [['render',_sfc_render]]);

const _hoisted_1 = { class: "pro-av wh100" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "dragging-width",
  props: {
    top: {
      type: String,
      default: "80%"
    },
    id: {
      type: String,
      default: "1"
    },
    bagColor: {
      type: String,
      default: "#000"
    },
    logo: {
      type: Function
    },
    footer: {
      type: Function
    }
  },
  emits: ["getMenuWidth"],
  setup(__props, { emit: __emit }) {
    const isShow = ref(true);
    const menuWidth = ref(200);
    const props = __props;
    const logoRef = ref();
    const footerRef = ref();
    const emit = __emit;
    const { top, id } = toRefs(props);
    const setMenuWidth = () => {
      emit("getMenuWidth", menuWidth);
    };
    onMounted(() => {
      dragControllerLR();
      setMenuWidth();
      const domLogo = logoRef.value;
      const domFooter = footerRef.value;
      if (props?.logo && !!domLogo) {
        render(
          // @ts-ignore
          h(props?.logo(), {
            id: props.id
            // contentData: props.itemData.contentData,
          }),
          domLogo
        );
      }
      if (props?.footer && !!domFooter) {
        render(
          // @ts-ignore
          h(props?.footer(), {
            id: props.id
            // contentData: props.itemData.contentData,
          }),
          domFooter
        );
      }
    });
    const isShowMenu = (val) => {
      isShow.value = val;
      if (val) {
        setWidth(menuWidth.value);
        menuWidth.value == 0 && (menuWidth.value = 200);
      } else {
        setWidth(0);
      }
      setMenuWidth();
    };
    const dragControllerLR = () => {
      let resize = document.getElementsByClassName(`menu-resize-${id.value}`);
      let left = document.getElementsByClassName(`menu-left-box-${id.value}`);
      let leftMenu = document.getElementsByClassName(`menu-left-box-content${id.value}`);
      for (let i = 0; i < resize.length; i++) {
        resize[i].onmousedown = function(e) {
          resize[i].style.background = "#d6d6d6";
          let startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          document.onmousemove = function(e2) {
            let endX = e2.clientX;
            let moveLen = resize[i].left + (endX - startX);
            if (moveLen < 200) moveLen = 200;
            if (moveLen > 500) moveLen = 500;
            resize[i].style.left = moveLen;
            menuWidth.value = moveLen;
            for (let j = 0; j < left.length; j++) {
              left[j].style.width = `${moveLen}px`;
              leftMenu[j].style.width = moveLen + "px";
            }
          };
          document.onmouseup = function(evt) {
            resize[i].style.background = "#E6EAEF";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture();
          };
          resize[i].setCapture && resize[i].setCapture();
          return false;
        };
      }
      setMenuWidth();
    };
    const setWidth = (moveLen) => {
      let left = document.getElementsByClassName(`menu-left-box-${id.value}`);
      let menuContent = document.getElementsByClassName(`menu-left-box-content${id.value}`);
      for (let j = 0; j < left.length; j++) {
        left[j].style.width = moveLen + "px";
        menuContent[j].style.width = moveLen + "px";
        if (moveLen == 0 || moveLen == 200) {
          left[j].style.minWidth = moveLen + "px";
          menuContent[j].style.minWidth = moveLen + "px";
        }
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["menu-left-box-", `menu-left-box-${unref(id)}`]),
        key: unref(id),
        style: normalizeStyle({ background: __props.bagColor })
      }, [
        createElementVNode("div", {
          class: normalizeClass(["menu-left-box-content", `menu-left-box-content${unref(id)}`])
        }, [
          __props.logo ? (openBlock(), createElementBlock("div", {
            key: 0,
            ref_key: "logoRef",
            ref: logoRef
          }, null, 512)) : createCommentVNode("", true),
          createElementVNode("div", {
            class: normalizeClass(["menu-left-box-hd w100", __props.footer ? "is-footer" : ""])
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 2),
          __props.footer ? (openBlock(), createElementBlock("div", {
            key: 1,
            ref_key: "footerRef",
            ref: footerRef,
            class: "footer-box"
          }, null, 512)) : createCommentVNode("", true),
          createElementVNode("div", {
            class: normalizeClass(["menu-resize-", `menu-resize-${unref(id)}`]),
            title: "拖拽改变宽度"
          }, [
            createElementVNode("div", _hoisted_1, [
              createElementVNode("div", {
                class: "Collection-discount dsf dsfjcc dsfaic",
                style: normalizeStyle({ top: unref(top) }),
                title: "收起展开"
              }, [
                isShow.value ? (openBlock(), createElementBlock("span", {
                  key: 0,
                  onClick: _cache[0] || (_cache[0] = withModifiers(($event) => isShowMenu(false), ["stop"]))
                }, [
                  createVNode(chevronLeft, { color: "#000" })
                ])) : createCommentVNode("", true),
                !isShow.value ? (openBlock(), createElementBlock("span", {
                  key: 1,
                  onClick: _cache[1] || (_cache[1] = withModifiers(($event) => isShowMenu(true), ["stop"]))
                }, [
                  createVNode(chevronRight, { color: "#000" })
                ])) : createCommentVNode("", true),
                renderSlot(_ctx.$slots, "collection")
              ], 4)
            ])
          ], 2)
        ], 2)
      ], 6);
    };
  }
});

// import draggingWidth from './src/components/DraggingWidth/index'
// import { draggingWidth } from '@/components/DraggingWidth'


_sfc_main.install = (app) => {
  app.component('draggingWidth', _sfc_main);
};

export { _sfc_main as default };
